<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>20绘制在画布中心的一段文字</title>
</head>
<style>
    canvas {
        border: 1px solid #ccc;
        display: block;
        margin: 100px auto;

    }
</style>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    /*画布的大小*/
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    /*1.在画布的中心绘制一段文字*/
    /*2.声明一段文字*/
    /*声明画布原点*/

    var x0 = w / 2;
    var y0 = h / 2;
    var str = '编程改变世界';
    /*确定画布的中心*/
    /*画辅助线*/
    ctx.beginPath();
    ctx.moveTo(w / 2 - .5, 0);
    ctx.lineTo(w / 2 - .5, h);
    ctx.moveTo(0, h / 2 - 0.5);
    ctx.lineTo(w, h / 2 - 0.5);
    ctx.strokeStyle = '#eee';
    ctx.stroke();
    /*绘制文本*/
    /*注意：起点位置在文字左下角*/
    /*文本属性设置 ： 尺寸字体 对齐方式：左右 上下*/
    ctx.beginPath();
    ctx.strokeStyle = '#000';
    ctx.font = '40px Microsoft YaHei UI';
    /*左右对齐方式 (center left right start end)基准起始坐标*/
    ctx.textAlign = 'center';
    /*ctx.direction属性CSS（rtl ltr）start和end与此有关
    * 如果是ltr,start和left表现一致
    * 如果是rtl,start和right表现一致*/
    // ctx.direction='rtl';
    /*垂直对齐的方式 基线 baseline 基于起始坐标*/
    ctx.textBaseline = 'middle';
    /*描边文字
    ctx.strokeText(str, x0, y0);*/
    /*填充文字*/
    ctx.fillText(str, x0, y0);
    /*画一个下划线和文字一样长*/
    ctx.beginPath();
    /*获取文本宽度*/
    var width = ctx.measureText(str).width;
    console.log(ctx.measureText(str).width);
    ctx.moveTo(x0 - width / 2, y0 + 20);
    ctx.lineTo(x0 + width / 2, y0 + 20);
    ctx.stroke();

</script>
</body>
</html>
